import { WeekDay } from 'admin/schema/Task';
import { Checkbox, Form, Select, Switch } from 'antd';
import React from 'react';
import { verifyNull } from 'utils/tools';
import { monthsData, callTimeOptions, weeksData } from '../../components/TaskTool';

const SelectDayTags: React.FC = () => {
  return (
    <div className="select-day-tags">
      <Form.Item className="form-item-span" name={['execTime', 'type']}>
        <Select options={callTimeOptions} />
      </Form.Item>
      <Form.Item
        className="form-item-span"
        label="节假日不外呼"
        name="skipHolidays"
        valuePropName="checked"
      >
        <Switch />
      </Form.Item>
      <Form.Item
        noStyle
        shouldUpdate={(prevValues, curValues) =>
          prevValues.execTime.type !== curValues.execTime.type
        }
      >
        {({ getFieldValue }) => {
          const type = getFieldValue(['execTime', 'type']);
          if (type === 'weekly') {
            return (
              <Form.Item
                name={['execTime', 'weeks']}
                rules={verifyNull('请至少选择一天进行外呼')}
                preserve={false}
              >
                <Checkbox.Group className="checkbox-day-group">
                  {weeksData.map(tag => (
                    <Checkbox key={tag} value={tag}>
                      {WeekDay[tag]}
                    </Checkbox>
                  ))}
                </Checkbox.Group>
              </Form.Item>
            );
          } else if (type === 'monthly') {
            return (
              <Form.Item
                name={['execTime', 'months']}
                rules={verifyNull('请至少选择一天进行外呼')}
                preserve={false}
              >
                <Checkbox.Group className="checkbox-day-group">
                  {monthsData.map(tag => (
                    <Checkbox key={tag} value={tag}>
                      {tag}
                    </Checkbox>
                  ))}
                </Checkbox.Group>
              </Form.Item>
            );
          } else {
            return null;
          }
        }}
      </Form.Item>
    </div>
  );
};

export default SelectDayTags;
